<html>

<head>
    <title>template</title>
    <style type="text/css">
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<!-- 
    <canvas> 只有两个可选的属性 width、height 属性，而没有 src、alt 属性
    设置width、height属性时，则默认 width为300、height为150,单位都是px
    也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。建议永远不要使用css属性来设置<canvas>的宽高
-->
<canvas id="tutorial" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
  function draw() {
    let canvas = document.getElementById('tutorial');
    // 检测支持性
    if (!canvas.getContext) return;
    //获得 2d 上下文对象
    let ctx = canvas.getContext("2d");
    //开始代码
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#f00';
    let grd = ctx.createLinearGradient(0, 0, 100, 0);//从左到右
    grd.addColorStop(0, "#f00"); //起始颜色
    grd.addColorStop(1, "#00f"); //终点颜色
    ctx.fillStyle = grd;
    ctx.strokeStyle = grd;

    ctx.arc(100, 100, 50, 0, 3/2* Math.PI, false);
    ctx.stroke();

  }

  draw();
</script>

</html>